<!--
  封装选择门店的通用弹层

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/04/06 10:14
-->
<template>
  <div>
    <a-modal 
      v-model:visible="vdata.visible" 
      width="95%" 
      :title="'请选择门店'" 
      @ok="okFunc"
    >
      <div class="modal-div">
        <!-- 门店列表 -->
        <div class="modal-div1">
          <div class="search">
            <a-input v-model:value="vdata.mchStoreSearchData.storeId" class="rate-input" placeholder="搜索门店ID" />
            <a-input v-model:value="vdata.mchStoreSearchData.storeName" class="rate-input" placeholder="搜索门店名称" />
            <a-button type="primary" @click="searchFunc">
              <template #icon><search-outlined /></template>查询
            </a-button>
            <a-button style="margin-left: 8px" @click="() => vdata.mchStoreSearchData = {} "><reload-outlined />重置</a-button>
          </div>
          <div class="list-table">
            <JeepayTable
              ref="mchStoreTableRef"
              :initData="false"
              :reqTableDataFunc="reqMchStoreTableDataFunc"
              :tableColumns="mchStoreTableColumns"
              :searchData="vdata.mchStoreSearchData"
              :rowSelection="{ type: 'radio',selectedRowKeys: vdata.selectedRowKeys.store, onChange: mchStoreTableSelectChangeFunc }"
              rowKey="storeId"
              :scrollX="400"
            />
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { API_URL_MCH_STORE_LIST, req } from '@/api/manage'
import { reactive, ref, defineExpose, nextTick, computed } from 'vue'


// 定义组件的传入参数 
const props = defineProps({
    storeIdAndName: { type: Boolean, default: false}, // 搜索时同时展示门店ID和门店名称
    mchNo: { type: String, default: ''}, // 商户号
})

// 定义向父组件 通讯 func 
const emit = defineEmits(['selectFinishFunc'])

const mchStoreTableColumns = [
  { title: '门店ID', dataIndex: 'storeId' },
  { title: '门店名称', dataIndex: 'storeName' }
]

// 当前 table 组件
const mchStoreTableRef = ref()


// 响应式数据 
const vdata :any = reactive ({

  visible: false,
  mchStoreSearchData: { 
    storeId: '',
    storeName: '',
  },

  selectedRowKeys: { store: [] } //列表的选择项

})


// 请求table接口数据 商户门店列表
function reqMchStoreTableDataFunc (params){
  return req.list(API_URL_MCH_STORE_LIST, {mchNo: props.mchNo})
}

// 商户表格搜索事件
const searchFunc = () => mchStoreTableRef.value.refTable(true)

// 商户表格的选择事件
function mchStoreTableSelectChangeFunc(selectedRowKeys) {
  vdata.selectedRowKeys.store = selectedRowKeys
}

// 选择完毕
function okFunc(){

  emit('selectFinishFunc', 
  [
    vdata.selectedRowKeys.store.length > 0 ? vdata.selectedRowKeys.store[0] : null,
  ])

}

function close(){
  vdata.visible = false
}


// 显示
function show (initMchSearchData) {

  vdata.selectedRowKeys = {store: []} //清空已选择的数据

  vdata.mchStoreSearchData = initMchSearchData || { }
  vdata.visible = true

  nextTick(() => {
    mchStoreTableRef.value.refTable(true)
  })
}

// 定义对外输出函数
defineExpose( { show, close } )
</script>

<style scoped lang="less">

.search {

  display: flex;
  margin: 10px 0;
  .rate-input {
    width: 200px;
    margin-right: 10px;
  }
}

.modal-div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .modal-div1 {
    flex-grow: 1;
    width: 30%;
  }

  .list-table {
    border: 1px solid #ddd;
    padding: 0;
    border-radius: 6px;
  }
}
.second-div {
 margin: 0 10px;
}
@media screen and (max-width:768px){
  .modal-div {
    flex-direction: column;
    .modal-div1 {
      width: 100%;
    }
  }
  .second-div {
    margin: 0 
  }
}
</style>
